<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script src="../显示相关//theme/ceshi.js"></script>
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
</body>
<!-- 
    常用在要计算占比的情况下
    饼图里面的数据是一个数组，数组中存放的是一个又一个的对象

    调色盘是一组颜色，图形，系列会自动从其中选取颜色

    主题调色盘：
    是一个数组的类型，里面的数据图形会自己将其补充进去,是在主题的js文件中，通过registerTheme中的配置对象中的颜色数组决定的

    全局调色盘：
    如果使用了这个，里面的颜色会覆盖主题颜色中的颜色
    在option中配置一个结点color:[]

    局部调色盘：
    设置给series中的一个对象，color:[]
    这个颜色的优先级是最高的


 -->
<script>
    var mEcharts = echarts.init(document.querySelector('div'),"ceshi")
    var pieData=[
        {
            name:'淘宝',
            value:11232
        },
        {
            name:'京东',
            value:22673
        },
        {
            name:'唯品会',
            value:6123
        },
        {
            name:'1号店',
            value:8000
        },
        {
            name:'聚美优品',
            value:6700
        }
    ]
    var option={
        color:[
        'red','green','blue','skyblue','purple'

        ],
        tooltip:{
            trigger:'item'
        },
        series:[
            {
                type:'pie',
                data:pieData,
                // 显示数值可以通过forrmater来实现
                label:{
                    show:true,
                    formatter:function(args){
                        console.log(args);
                        return args.data.name +'平台' +args.data.value +'元\n' + args.percent+'%'
                    }
                },
                color:['pink','yellow','black','orange','red'],
                // 通过radius给饼图设置半径，同样可以设置成一百分比，他是相对于一个盒子较小的一半的百分比
                // radius:20
                // 设置圆环
                // radius:['50%','75%']
                // 南丁格尔图，他的每一个模块的半径是不一样的，取决于他的数值大小
                // roseType:'radius',
                // 选中效果
                selectedMode:'single'  //在南丁格尔图下可以进行选中偏离中心区域一小段距离，还有一个值是mutiple，通过selectedOffset来设置偏移量

            }
        ]
    }

    mEcharts.setOption(option)
</script>
</html>